<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/material.css">
		<script src="js/material.js"></script>
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	</head>
	<body>
		<!-- 标题始终显示，抽屉在大屏幕中始终显示 -->
		<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
            mdl-layout--fixed-header">
			<header class="mdl-layout__header">
				<div class="mdl-layout__header-row">
					<!-- 标题 -->
					<span class="mdl-layout-title">Title</span>
					<!-- 添加间隔将导航对齐到右侧 -->
					<div class="mdl-layout-spacer"></div>
					<nav class="mdl-navigation">
						<a class="mdl-navigation__link" href="">Link</a>
						<a class="mdl-navigation__link" href="">Link</a>
						<a class="mdl-navigation__link" href="">Link</a>
						<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
							退出
						</button>
					</nav>
				</div>
			</header>
			<div class="mdl-layout__drawer">
				<span class="mdl-layout-title">标题</span>
				<nav class="mdl-navigation">
					<aside>
						<a class="mdl-navigation__link" href="">医生</a>
						<a class="mdl-navigation__link" href="">客户</a>
						<a class="mdl-navigation__link" href="">Link</a>
						<a class="mdl-navigation__link" href="">Link</a>
					</aside>
				</nav>
			</div>
			<main class="mdl-layout__content">
				<div class="page-content">
					<!-- Your content goes here -->
				</div>
			</main>
		</div>
	</body>
</html>
